<template>
  <div class="child-app">
    <el-row>
      <el-col :span="4">
        <div class="sideMenu">
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            :default-active="active"
            :unique-opened="true"
            text-color="#fff"
            @select="changeMenu"
          >
            <el-sub-menu index="1">
              <template #title>
                <span>主应用</span>
              </template>
              <el-menu-item index="/">主应用 Home</el-menu-item>
              <el-menu-item index="/about">主应用 About</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <span>Vue2 应用</span>
              </template>
              <el-menu-item index="/vue2/home">Vue2 Home</el-menu-item>
              <el-menu-item index="/vue2/about">Vue2 About</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <span>Vue3 应用</span>
              </template>
              <el-menu-item index="/vue3/home">Vue3 Home</el-menu-item>
              <el-menu-item index="/vue3/about">Vue3 About</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <span>React 应用</span>
              </template>
              <el-menu-item index="/react/home">React Home</el-menu-item>
              <el-menu-item index="/react/about">React About</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <span>原生 应用</span>
              </template>
              <el-menu-item index="/htm/index.html">htm Home</el-menu-item>
              <el-menu-item index="/htm/start.html">htm start</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>
      </el-col>
      <!-- <div id="nav">
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link> |
        <router-link to="/vue2">vue Home</router-link> |
        <router-link to="/vue2/about">vue About</router-link> |
        <router-link to="/vue3/home">vue3 Home</router-link> |
        <router-link to="/vue3/about">vue3 about</router-link> |
        <router-link to="/react">react Home</router-link> |
        <router-link to="/htm">htm Home</router-link>
      </div> -->
      <el-col :span="20">
        <div class="content">
          <router-view />
          <div id="vue2"></div>
          <div id="vue3"></div>
          <div id="react"></div>
          <div id="htm"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      active: ''
    }
  },
  components: {},
  watch: {
    '$route'(val) {
      this.active = val.path
    }
  },
  methods: {
    changeMenu(val) {
      this.$router.push(val)
    }
  },
};
</script>

<style scoped>
* {
  margin: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.child-app {
  text-align: center;
  height: calc(100vh);
}
.content {
  padding: 40px 10px;
}
.sideMenu {
  height: calc(100vh);
  background-color: #545c64;
}
</style>
